<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>代码风格简历</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        font-family: 'Consolas', 'Monaco', monospace;
        background-color: #1e1e1e;
        color: #d4d4d4;
        display: flex;
        justify-content: center;
        transition: background-color 0.5s ease, color 0.5s ease;
      }

      body.light-theme {
        background-color: #f5f5f5;
        color: #333;
      }

      .container {
        display: flex;
        width: 100%;
        max-width: 1200px;
        flex-direction: column;
      }

      @media (min-width: 768px) {
        .container {
          flex-direction: row;
        }
      }

      .left-column {
        width: 100%;
        padding: 20px;
        background-color: #252526;
        transition: background-color 0.5s ease, transform 0.5s ease;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      }

      .light-theme .left-column {
        background-color: #e8e8e8;
      }

      .right-column {
        width: 100%;
        padding: 20px;
        transition: transform 0.5s ease;
      }

      @media (min-width: 768px) {
        .left-column {
          width: 30%;
        }
        .right-column {
          width: 70%;
        }
      }

      .profile-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 20px;
      }

      .profile-img {
        width: 180px;
        height: 180px;
        border-radius: 50%;
        border: 2px solid #569cd6;
        margin-bottom: 20px;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        object-fit: cover;
        animation: pulse 2s infinite alternate;
      }

      .profile-img:hover {
        transform: scale(1.05);
        box-shadow: 0 0 20px rgba(86, 156, 214, 0.7);
      }

      @keyframes pulse {
        0% {
          box-shadow: 0 0 5px rgba(86, 156, 214, 0.5);
        }
        100% {
          box-shadow: 0 0 20px rgba(86, 156, 214, 0.8);
        }
      }

      .comment {
        color: #608b4e;
        margin-bottom: 10px;
        transition: color 0.5s ease;
      }

      .light-theme .comment {
        color: #008000;
      }

      .class {
        color: #4ec9b0;
        font-weight: bold;
        transition: color 0.5s ease;
      }

      .light-theme .class {
        color: #267f99;
      }

      .function {
        color: #dcdcaa;
        transition: color 0.5s ease;
      }

      .light-theme .function {
        color: #795e26;
      }

      .keyword {
        color: #569cd6;
        transition: color 0.5s ease;
      }

      .light-theme .keyword {
        color: #0000ff;
      }

      .string {
        color: #ce9178;
        transition: color 0.5s ease;
      }

      .light-theme .string {
        color: #a31515;
      }

      .number {
        color: #b5cea8;
        transition: color 0.5s ease;
      }

      .light-theme .number {
        color: #098658;
      }

      .boolean {
        color: #569cd6;
        transition: color 0.5s ease;
      }

      .light-theme .boolean {
        color: #0000ff;
      }

      .property {
        color: #9cdcfe;
        transition: color 0.5s ease;
      }

      .light-theme .property {
        color: #001080;
      }

      .bracket {
        color: #d4d4d4;
        transition: color 0.5s ease;
      }

      .light-theme .bracket {
        color: #000000;
      }

      .enum-container {
        margin-bottom: 30px;
        transition: transform 0.3s ease;
        cursor: pointer;
      }

      .enum-container:hover {
        transform: translateX(10px);
      }

      .indent {
        margin-left: 20px;
      }

      .method {
        margin-bottom: 30px;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.5s ease, transform 0.5s ease;
      }

      .method.visible {
        opacity: 1;
        transform: translateY(0);
      }

      .class-definition {
        margin-bottom: 40px;
        padding: 15px;
        border-radius: 5px;
        background-color: rgba(37, 37, 38, 0.5);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.5s ease;
      }

      .light-theme .class-definition {
        background-color: rgba(232, 232, 232, 0.5);
      }

      .class-definition:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
      }

      .like-button {
        position: fixed;
        bottom: 20px;
        right: 20px;
        font-size: 40px;
        cursor: pointer;
        transition: transform 0.3s ease;
        z-index: 100;
      }

      .like-button:hover {
        transform: scale(1.2);
      }

      .like-button:active {
        transform: scale(0.9);
      }

      .counter {
        position: fixed;
        bottom: 20px;
        right: 80px;
        font-size: 30px;
        color: white;
        transition: color 0.5s ease;
        z-index: 100;
      }

      .light-theme .counter {
        color: #333;
      }

      .theme-toggle {
        position: fixed;
        top: 20px;
        right: 20px;
        font-size: 24px;
        cursor: pointer;
        z-index: 100;
        background: none;
        border: none;
        color: #d4d4d4;
        transition: transform 0.3s ease;
      }

      .theme-toggle:hover {
        transform: rotate(30deg);
      }

      .light-theme .theme-toggle {
        color: #333;
      }

      .skill-bar {
        height: 8px;
        background-color: #333;
        margin-top: 5px;
        margin-bottom: 15px;
        border-radius: 4px;
        position: relative;
        overflow: hidden;
      }

      .light-theme .skill-bar {
        background-color: #ddd;
      }

      .skill-progress {
        height: 100%;
        background-color: #569cd6;
        width: 0;
        transition: width 1.5s ease-out;
        border-radius: 4px;
      }

      .light-theme .skill-progress {
        background-color: #0078d4;
      }

      .typing-effect {
        border-right: 2px solid #569cd6;
        white-space: nowrap;
        overflow: hidden;
        width: 0;
        animation: typing 3.5s steps(40, end) forwards;
      }

      @keyframes typing {
        from { width: 0 }
        to { width: 100% }
      }

      .fade-in {
        opacity: 0;
        animation: fadeIn 1s ease forwards;
      }

      @keyframes fadeIn {
        to { opacity: 1 }
      }

      .floating {
        animation: floating 3s ease-in-out infinite;
      }

      @keyframes floating {
        0% { transform: translateY(0px); }
        50% { transform: translateY(-10px); }
        100% { transform: translateY(0px); }
      }

      .particles-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: -1;
      }

      .particle {
        position: absolute;
        background-color: rgba(86, 156, 214, 0.5);
        border-radius: 50%;
        pointer-events: none;
      }

      .light-theme .particle {
        background-color: rgba(0, 120, 212, 0.5);
      }
    </style>
  </head>
  <body>
    <div class="particles-container" id="particles"></div>
    <button class="theme-toggle" id="themeToggle">🌓</button>

    <div class="container">
      <div class="left-column">
        <div class="profile-container">
          <img
            class="profile-img"
            src="https://gr-test.oss-cn-shenzhen.aliyuncs.com/02a0271622fba72d55334191e540f2793cee0eee8227010727b0ad469bd8c063.png"
            alt="个人照片"
          />
        </div>

        <div class="comment fade-in">/// &lt;summary&gt;</div>
        <div class="comment fade-in">/// 寻找全栈开发工程师岗位</div>
        <div class="comment fade-in">/// 3年工作经验，精通前后端开发</div>
        <div class="comment fade-in">/// 5天工作制，2天休息。随时到岗。</div>
        <div class="comment fade-in">/// &lt;/summary&gt;</div>

        <div class="enum-container">
          <span class="keyword">public enum </span>
          <span class="class">技术平台</span><span class="bracket">()</span>
          <span class="bracket">{</span>
          <div class="indent">
            Windows,<br />
            Linux,<br />
            Docker,<br />
            云服务
          </div>
          <span class="bracket">}</span>
        </div>

        <div class="enum-container">
          <span class="keyword">public enum </span>
          <span class="class">编程语言</span><span class="bracket">()</span>
          <span class="bracket">{</span>
          <div class="indent">
            <div>Java <div class="skill-bar"><div class="skill-progress" data-width="90"></div></div></div>
            <div>JavaScript <div class="skill-bar"><div class="skill-progress" data-width="85"></div></div></div>
            <div>Python <div class="skill-bar"><div class="skill-progress" data-width="75"></div></div></div>
            <div>HTML5,CSS3 <div class="skill-bar"><div class="skill-progress" data-width="95"></div></div></div>
            <div>SQL <div class="skill-bar"><div class="skill-progress" data-width="80"></div></div></div>
          </div>
          <span class="bracket">}</span>
        </div>

        <div class="enum-container">
          <span class="keyword">public enum </span>
          <span class="class">技术框架</span><span class="bracket">()</span>
          <span class="bracket">{</span>
          <div class="indent">
            <div>Spring <div class="skill-bar"><div class="skill-progress" data-width="88"></div></div></div>
            <div>Vue <div class="skill-bar"><div class="skill-progress" data-width="92"></div></div></div>
            <div>React <div class="skill-bar"><div class="skill-progress" data-width="78"></div></div></div>
            <div>Django <div class="skill-bar"><div class="skill-progress" data-width="70"></div></div></div>
            <div>Bootstrap <div class="skill-bar"><div class="skill-progress" data-width="85"></div></div></div>
            <div>MyBatis <div class="skill-bar"><div class="skill-progress" data-width="82"></div></div></div>
          </div>
          <span class="bracket">}</span>
        </div>

        <div class="enum-container">
          <span class="keyword">public enum </span>
          <span class="class">开发工具</span><span class="bracket">()</span>
          <span class="bracket">{</span>
          <div class="indent">
            VSCode,<br />
            IDEA,<br />
            Git,<br />
            Maven,<br />
            Jenkins,<br />
            Docker
          </div>
          <span class="bracket">}</span>
        </div>

        <div class="enum-container">
          <span class="keyword">public enum </span>
          <span class="class">语言能力</span><span class="bracket">()</span>
          <span class="bracket">{</span>
          <div class="indent">
            // 母语<br />
            <div>中文 = C1 <div class="skill-bar"><div class="skill-progress" data-width="100"></div></div></div>
            // 流利<br />
            <div>英语 = B2 <div class="skill-bar"><div class="skill-progress" data-width="80"></div></div></div>
          </div>
          <span class="bracket">}</span>
        </div>

        <div class="enum-container">
          <span class="keyword">public enum </span>
          <span class="class">个人特质</span><span class="bracket">()</span>
          <span class="bracket">{</span>
          <div class="indent">
            学习能力强,<br />
            responsibility strong,<br />
            团队合作,<br />
            善于沟通,<br />
            解决问题,<br />
            抗压能力强
          </div>
          <span class="bracket">}</span>
        </div>
      </div>

      <div class="right-column">
        <div class="class-definition">
          <span class="keyword">public class </span>
          <span class="class">个人信息</span>
          <span class="bracket">{</span>
          <div class="indent">
            <div class="typing-effect">
              <span class="keyword">public string </span>
              <span class="property">姓名</span> = <span class="string">"张三"</span>;
            </div>
            <div class="typing-effect" style="animation-delay: 0.5s">
              <span class="keyword">public string </span>
              <span class="property">职位</span> = <span class="string">"全栈开发工程师"</span>;
            </div>
            <div class="typing-effect" style="animation-delay: 1s">
              <span class="keyword">public string </span>
              <span class="property">邮箱</span> =
              <span class="string">"zhangsan@example.com"</span>;
            </div>
            <div class="typing-effect" style="animation-delay: 1.5s">
              <span class="keyword">public int </span>
              <span class="property">电话</span> = <span class="number">13812345678</span>;
            </div>
            <div class="typing-effect" style="animation-delay: 2s">
              <span class="keyword">public string[] </span>
              <span class="property">地点</span> = { <span class="string">"北京市"</span>,
              <span class="string">"海淀区"</span>, <span class="string">"中关村"</span>};
            </div>
            <div class="typing-effect" style="animation-delay: 2.5s">
              <span class="keyword">public bool </span>
              <span class="property">有驾照</span> = <span class="boolean">true</span>;
            </div>
            <div class="typing-effect" style="animation-delay: 3s">
              <span class="keyword">public int </span>
              <span class="property">年龄</span> = <span class="number">28</span>;
            </div>
          </div>
          <span class="bracket">}</span>
        </div>

        <div class="class-definition">
          <span class="keyword">public partial class </span>
          <span class="class">教育背景</span>
          <span class="bracket"> : </span>
          <span class="class">高等教育</span>
          <span class="bracket">{</span>

          <div class="method indent">
            <span class="keyword">private void </span>
            <span class="function">北京大学</span><span class="bracket">()</span>
            <span class="bracket">{</span>
            <div class="indent">
              <div>
                <span class="keyword">var </span>
                <span class="property">_学历</span> = <span class="class">硕士</span>;
                <span class="comment">// 2018-2021</span>
              </div>
              <div>
                <span class="keyword">var </span>
                <span class="property">_专业</span> = <span class="class">计算机科学与技术</span>;
              </div>
              <div>
                <span class="keyword">var </span>
                <span class="property">_成绩</span> = <span class="string">"优秀"</span>;
              </div>
            </div>
            <span class="bracket">}</span>
          </div>

          <div class="method indent">
            <span class="keyword">private void </span>
            <span class="function">清华大学</span><span class="bracket">()</span>
            <span class="bracket">{</span>
            <div class="indent">
              <div>
                <span class="keyword">var </span>
                <span class="property">_学历</span> = <span class="class">本科</span>;
                <span class="comment">// 2014-2018</span>
              </div>
              <div>
                <span class="keyword">var </span>
                <span class="property">_专业</span> = <span class="class">软件工程</span>;
              </div>
              <div>
                <span class="keyword">var </span>
                <span class="property">_证书</span> = { <span class="string">"优秀毕业生"</span>,
                <span class="string">"三好学生"</span>};
              </div>
            </div>
            <span class="bracket">}</span>
          </div>

          <span class="bracket">}</span>
        </div>

        <div class="class-definition">
          <span class="keyword">public static class </span>
          <span class="class">工作经历</span>
          <span class="bracket">{</span>

          <div class="method indent">
            <span class="keyword">public void </span>
            <span class="function">阿里巴巴</span><span class="bracket">()</span>
            <span class="bracket">{</span>
            <div class="indent">
              <div>
                <span class="keyword">var </span>
                <span class="property">_时间</span> = <span class="function">Range</span>(<span
                  class="string"
                  >"2021年6月"</span
                >, <span class="string">"至今"</span>);
              </div>
              <div>
                <span class="keyword">var </span>
                <span class="property">_职位</span> = <span class="string">"高级全栈工程师"</span>;
              </div>
              <div class="comment floating"
                >/* 负责公司核心业务系统的开发与维护， 主导了电商平台的重构工作，提升了系统性能30%，
                优化了用户体验，减少了50%的页面加载时间， 参与了微服务架构的设计与实现。 */</div
              >
            </div>
            <span class="bracket">}</span>
          </div>

          <div class="method indent">
            <span class="keyword">public void </span>
            <span class="function">腾讯</span><span class="bracket">()</span>
            <span class="bracket">{</span>
            <div class="indent">
              <div>
                <span class="keyword">var </span>
                <span class="property">_时间</span> = <span class="function">Range</span>(<span
                  class="string"
                  >"2018年7月"</span
                >, <span class="string">"2021年5月"</span>);
              </div>
              <div>
                <span class="keyword">var </span>
                <span class="property">_职位</span> = <span class="string">"前端开发工程师"</span>;
              </div>
              <div class="comment floating"
                >/* 参与开发了多个内部工具和客户端应用， 使用Vue.js和React框架构建高性能的Web应用，
                实现了组件化开发和自动化测试， 负责前端架构的优化和性能调优。 */</div
              >
            </div>
            <span class="bracket">}</span>
          </div>

          <span class="bracket">}</span>
        </div>

        <div class="class-definition">
          <span class="keyword">public class </span>
          <span class="class">项目经验</span>
          <span class="bracket">{</span>

          <div class="method indent">
            <span class="keyword">public void </span>
            <span class="function">电商平台重构</span><span class="bracket">()</span>
            <span class="bracket">{</span>
            <div class="indent">
              <div>
                <span class="keyword">var </span>
                <span class="property">_技术栈</span> =
                <span class="string">"Spring Boot + Vue + MySQL + Redis"</span>;
              </div>
              <div class="comment floating"
                >/* 作为技术负责人，带领团队完成了电商平台的全面重构，
                将单体应用拆分为微服务架构，提高了系统的可扩展性和稳定性，
                引入了Redis缓存和消息队列，优化了高并发场景下的性能，
                实现了前后端分离，提升了开发效率和用户体验。 */</div
              >
            </div>
            <span class="bracket">}</span>
          </div>

          <div class="method indent">
            <span class="keyword">public void </span>
            <span class="function">数据分析平台</span><span class="bracket">()</span>
            <span class="bracket">{</span>
            <div class="indent">
              <div>
                <span class="keyword">var </span>
                <span class="property">_技术栈</span> =
                <span class="string">"Python + Django + React + ECharts"</span>;
              </div>
              <div class="comment floating"
                >/* 设计并开发了一个企业级数据分析平台， 实现了数据的采集、清洗、分析和可视化展示，
                集成了机器学习算法，提供智能推荐和预测功能，
                开发了可定制的报表系统，满足不同业务部门的需求。 该项目获得了公司年度最佳项目奖。
                */</div
              >
            </div>
            <span class="bracket">}</span>
          </div>

          <span class="bracket">}</span>
        </div>
      </div>
    </div>

    <div class="like-button" id="likeButton" onclick="like()">👍</div>
    <div class="counter" id="counter">1.2K</div>

    <script>
      // 主题切换功能
      const themeToggle = document.getElementById('themeToggle');
      const body = document.body;
      
      themeToggle.addEventListener('click', () => {
        body.classList.toggle('light-theme');
        if (body.classList.contains('light-theme')) {
          themeToggle.textContent = '🌙';
        } else {
          themeToggle.textContent = '🌓';
        }
      });

      // 点赞功能增强
      function like() {
        const counter = document.getElementById('counter');
        const likeButton = document.getElementById('likeButton');
        let count = parseFloat(counter.innerText);
        count += 0.1;
        counter.innerText = count.toFixed(1) + 'K';
        
        // 添加点赞动画
        likeButton.style.transform = 'scale(1.3)';
        setTimeout(() => {
          likeButton.style.transform = 'scale(1)';
        }, 200);
        
        // 创建飘心效果
        createHeart();
      }
      
      function createHeart() {
        const heart = document.createElement('div');
        heart.innerHTML = '❤️';
        heart.style.position = 'fixed';
        heart.style.bottom = '70px';
        heart.style.right = '30px';
        heart.style.fontSize = '20px';
        heart.style.color = '#ff4d4d';
        heart.style.opacity = '1';
        heart.style.pointerEvents = 'none';
        heart.style.transition = 'all 1s ease';
        document.body.appendChild(heart);
        
        setTimeout(() => {
          heart.style.bottom = '120px';
          heart.style.opacity = '0';
        }, 50);
        
        setTimeout(() => {
          document.body.removeChild(heart);
        }, 1000);
      }

      // 滚动动画
      const methods = document.querySelectorAll('.method');
      
      function checkScroll() {
        methods.forEach(method => {
          const methodPosition = method.getBoundingClientRect().top;
          const screenPosition = window.innerHeight / 1.3;
          
          if (methodPosition < screenPosition) {
            method.classList.add('visible');
          }
        });
      }
      
      window.addEventListener('scroll', checkScroll);
      window.addEventListener('load', checkScroll);

      // 技能进度条动画
      function animateSkillBars() {
        const skillBars = document.querySelectorAll('.skill-progress');
        skillBars.forEach(bar => {
          const width = bar.getAttribute('data-width') + '%';
          setTimeout(() => {
            bar.style.width = width;
          }, 300);
        });
      }
      
      window.addEventListener('load', animateSkillBars);

      // 背景粒子效果
      function createParticles() {
        const particlesContainer = document.getElementById('particles');
        const particleCount = 50;
        
        for (let i = 0; i < particleCount; i++) {
          const particle = document.createElement('div');
          particle.classList.add('particle');
          
          // 随机大小
          const size = Math.random() * 5 + 2;
          particle.style.width = size + 'px';
          particle.style.height = size + 'px';
          
          // 随机位置
          const posX = Math.random() * 100;
          const posY = Math.random() * 100;
          particle.style.left = posX + '%';
          particle.style.top = posY + '%';
          
          // 随机动画
          const duration = Math.random() * 20 + 10;
          const delay = Math.random() * 5;
          
          particle.style.animation = `floating ${duration}s ease-in-out ${delay}s infinite`;
          particle.style.opacity = Math.random() * 0.5 + 0.1;
          
          particlesContainer.appendChild(particle);
        }
      }
      
      window.addEventListener('load', createParticles);

      // 鼠标悬停效果增强
      const classDefinitions = document.querySelectorAll('.class-definition');
      classDefinitions.forEach(def => {
        def.addEventListener('mouseenter', () => {
          def.style.transform = 'translateY(-8px)';
          def.style.boxShadow = '0 8px 20px rgba(0, 0, 0, 0.3)';
        });
        
        def.addEventListener('mouseleave', () => {
          def.style.transform = 'translateY(-5px)';
          def.style.boxShadow = '0 5px 15px rgba(0, 0, 0, 0.2)';
        });
      });

      // 添加鼠标跟随效果
      let mouseX = 0, mouseY = 0;
      let cursorX = 0, cursorY = 0;
      
      document.addEventListener('mousemove', (e) => {
        mouseX = e.clientX;
        mouseY = e.clientY;
      });
      
      function animateCursor() {
        // 平滑跟随效果
        cursorX += (mouseX - cursorX) * 0.1;
        cursorY += (mouseY - cursorY) * 0.1;
        
        // 更新粒子容器的视觉效果
        const particles = document.querySelectorAll('.particle');
        particles.forEach(particle => {
          const rect = particle.getBoundingClientRect();
          const particleX = rect.left + rect.width / 2;
          const particleY = rect.top + rect.height / 2;
          
          const distX = cursorX - particleX;
          const distY = cursorY - particleY;
          const distance = Math.sqrt(distX * distX + distY * distY);
          
          if (distance < 100) {
            const scale = 1 + (100 - distance) / 200;
            particle.style.transform = `scale(${scale})`;
            particle.style.opacity = Math.min(0.8, parseFloat(particle.style.opacity) + 0.1);
          } else {
            particle.style.transform = 'scale(1)';
            particle.style.opacity = Math.max(0.1, parseFloat(particle.style.opacity) - 0.02);
          }
        });
        
        requestAnimationFrame(animateCursor);
      }
      
      animateCursor();
    </script>
  </body>
</html>
